<template>
    <div class="login w-full h-[100vh] bg-login-bg bg-fixed bg-cover flex items-center justify-center">
        <div class="mask w-[40%] bg-[rgba(255,255,255,.5)] rounded-custom truncate">
            <div class="title h-[3.75rem] text-center flex items-center justify-center text-[1.5625rem] text-primary">
                回忆萦绕身畔 你我永不孤单
            </div>
            <div class="login w-full sm:w-[80%] md:w-[60%] lg:w-[50%] mx-auto">
                <n-form ref="formRef" class="" :model="userLoginForm" :rules="rules" label-placement="left"
                    label-width="auto">
                    <n-form-item path="username">
                        <n-input v-model:value="userLoginForm.username" size="large" round placeholder="账号或邮箱">
                            <template #prefix>
                                <img :src="user" alt="SVG Image" width="" height="" />
                            </template>
                            <template #suffix>
                                <n-icon :component="FlashOutline" />
                            </template>
                        </n-input>
                    </n-form-item>
                    <n-form-item path="password">
                        <n-input v-model:value="userLoginForm.password" size="large" round type="password"
                            show-password-on="click" placeholder="密码" :maxlength="16" show-count>
                            <template #prefix> <img :src="pwd" alt="SVG Image" width="" height="" />
                            </template></n-input>
                    </n-form-item>
                    <n-form-item path="email">
                        <n-input v-model:value="userLoginForm.email" size="large" round type="text"
                            show-password-on="click" placeholder="邮箱">
                            <template #prefix> <img :src="email" alt="SVG Image" width="" height="" />
                            </template></n-input>
                    </n-form-item>
                </n-form>
            </div>

            <div class="btn w-[35%] flex flex-col items-center justify-center mx-[auto] mt-[0.625rem] mb-[0.625rem]">
                <n-button type="info" class="mt-[0.125rem]" @click="register">夢の鍵[注册]</n-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { FlashOutline } from '@vicons/ionicons5'
import { type FormItemRule, type FormRules, type FormInst } from 'naive-ui'
import { useMessage } from 'naive-ui'
import user from '@/assets/icon/user.svg'
import pwd from '@/assets/icon/pwd.svg'
import email from '@/assets/icon/email.svg'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/user'
const query = localStorage.getItem('query')
const path = localStorage.getItem('path')
const authStore = useAuthStore()
const router = useRouter()
const message = useMessage()
// 账号密码
const userLoginForm = reactive({
  username: '',
  password: '',
  email: '',
})
const formRef = ref<FormInst | null>(null)
// 用户名验证
const valiUser = (rule: FormItemRule, value: string, callBack: any) => {
  if (!value) {
    return new Error('账户不能为空')
  } else if (value === userLoginForm.email) {
    return new Error('账户和邮箱不能相同')
  }
  return callBack()
}
// 密码验证
const valiPwd = (rule: FormItemRule, value: string, callBack: any) => {
  if (!value) {
    return new Error('密码不能为空')
  }
  return callBack()
}
const vallEmail = (rule: FormItemRule, value: string, callBack: any) => {
  if (!value) {
    return new Error('邮箱不能为空')
  } else if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
    return new Error('邮箱格式不正确')
  }
  return callBack()
}
// 表单验证
const rules: FormRules = {
  username: [
    {
      required: true,
      validator: valiUser,
      trigger: ['blur'],
    },
  ],
  password: [
    {
      required: true,
      validator: valiPwd,
      trigger: ['blur'],
    },
  ],
  email: [
    {
      required: true,
      validator: vallEmail,
      trigger: ['blur'],
    },
  ],
}
// 提交注册
const register = () => {
  if (formRef.value) {
    formRef.value.validate(async (vali: any) => {
      if (!vali) {
          let res: any = await authStore.register(userLoginForm);
          if (res.states) {
              // 注册&&登录成功
              message.success(res.message)
              if (path) {
                        // 跳转到登录前的页面
                        router.push({ path: path,query: JSON.parse(query as string) })
                    } else {
                        // 跳转到首页
                        router.push({ path: '/' })
                    }
                    localStorage.removeItem('path')
          } else {
              // 登录失败
              message.error(res.message)
          }
        }
    })
      }
}
</script>

<style lang="scss" scoped></style>
